01-Baby Steps

Ottavia M. Epifania

YAML

The overall appearance and behavior of the document is specified in the YAML:

HTML default YAML

---
title: "Untitled"
format: html
editor: visual
---

PDF default YAML

---
title: "Untitled"
format: pdf
editor: visual
---

Source vs. Visual

YAML: Table of Contents (ToC)

---
title: "My quarto file"
author: "Jane Doe"
date: today
format: 
  html:
    self-contained: true     # 1
    toc: true                # 2   
    toc-title: My contents   # 3
    toc-location: left       # 4
editor: source
lang: it
---
  1. Allows for the sharing of the hmtl file without requiring for external files

  2. Put Table of Contents

  3. Define the title of the ToC

  4. Location of the ToC (left, right, body)

Markdown formatting

Headings

# First level

Section

## Second level

Subsection

### Third level

Sub-subsection

#### Fourth level

Paragraph

##### Fifth level

I frankly have never used that

##### Sixth level

I have no idea

Text Formatting

Markdown syntax: Font

*italics*, **bold**, ***bold italics*** 

Output

italics, bold, bold italics

Markdown syntax: Scripts

textsuperscirpt^2^, textunderscript~2~

Output

textsuperscirpt2, textunderscript2

Markdown syntax: In line code

`this is myinline code`

Output

this is myinline code

Lists

* Main Unordered List
  + First sub-item
  + Second sub-item 
    - It's getting weird



1. Main ordered list
2. Second item
   i) First sub-item 1
      A.  First sub-sub-item 1




- [ ] First things first 1
- [ ] Second things second 2
  • Main Unordered List
    • First sub-item
    • Second sub-item
      • It’s getting weird
  1. Main ordered list
  2. Second item
    1. First sub-item 1
      1. First sub-sub-item 1

Math

In-line math:

This is an in-line equation $y = \beta_0 + \beta_1 X + \varepsilon$

This is an in-line equation \(y = \beta_0 + \beta_1 X + \varepsilon\)

Math math:

This is an  equation $$z = \dfrac{\bar{x} -\mu}{\sigma}$$

This is an equation \[z = \dfrac{\bar{x} -\mu}{\sigma}\]

Publish your HTML document (with GitHub)

GitHub pages

Navigate to your GitHub repository online:

It worked!

(take some time, be patient)

README.md

This file handles the generation of the website

It works with basic markdown syntax

commit + push

Don’t forget to push!

Check


Your turn!

Inside your R project for this school:

  • Create a new HMTL quarto document that must contain:

    • 3 sections (level I heading), each with a subsection (level II heading)
    • Place a picture with a caption in one of the subsection
    • Place an unordered list
  • Render the document in HTML

  • Create the link to your newly created document in the README.md

  • Commit & push the .qmd and .html of your newly created document

  • Commit & push the .md and .htmlof the README file

Layout

By default, the HTML document is set to take all the space in the page

format: 
  html:
    page-layout: full

Custom layout with grid

The page layout is based on a 12-unit (or 12-column) grid system, which can be used to divide the space accordingly:

::: {.grid}

::: {.g-col-4}

First column, 4/12 of the total width

:::

::: {.g-col-8}

Second column, 8/12 of the total width 

:::

:::

Columns

:::: {.columns}


::: {.column width="50%"}

This is my first column!

:::

::: {.column width="50%"}

And this is the second column
:::

::::

This is my first column!

And this is the second column

(Best for HMTL presentation)

tabset: code

::: {.panel-tabset}

## Aim

Here I present the aim of the study 

## Methods

Here I present the methods used to pursue the aim

## Results

And here I present the results

:::

tabset: output

Here I present the aim of the study

Here I present the methods used to pursue the aim

And here I present the results

Document layout

format: 
  html: 
   toc: true
   toc-location: left
   grid:
    sidebar-width: 300px
    body-width: 900px
    margin-width: 300px
    gutter-width: 1.5rem

Margins

You can place anything in the margins of the documents!

:::{.column-margin}
I want this picture displayed in the margin 


![](img/peacock.png)
:::

Your turn

From the previous document:

  • In one of the sections, create a grid dividing the space in 3 intervals of different width
  • Place a picture in each of the three intervals
  • In a subsection:
    • Create a panel tabset with 3 tabs (like Introduction, Methods, Results)
    • Add a picture in the margin of the document